<!--
 * @Date: 2024-05-10 15:22:49
 * @LastEditTime: 2024-08-08 14:01:29
 * @Description: 
 * @FilePath: \check-app\src\components\u-detail-item\u-detail-item.vue
-->
<template>
  <view class="detail-box">
    <view class="title" :class="'img-' + type">
      <text v-if="isBottle">气瓶标签-</text>
      <text class="flex-one">{{ detailObj.targetName }}</text>
      <text class="tag1" v-if="!isEnt && type !== 'VEHICLE'">{{
        detailObj.objectType
      }}</text>
    </view>
    <view class="flex-row org" v-if="!isEnt">
      <p class="key1">所属企业：</p>
      <p class="value">{{ detailObj._orgId }}</p>
    </view>
    <view class="flex-row" v-if="!isBottle">
      <p class="key1">所属区域：</p>
      <p class="value">{{ detailObj._districtId }}</p>
    </view>

    <view v-if="isDelivery || isUser" class="flex-row display-flex">
      <p class="key1">联系人：</p>
      <view class="person">
        {{ isDelivery ? detailObj.masterName : detailObj.rectifierPerson }}
		<template v-if="isDelivery">
		  <u-phone-call :phone="detailObj.masterPhone" v-if="detailObj.masterPhone">
		    {{ detailObj.masterPhone }}
		  </u-phone-call>
		</template>
		<template v-else>
		  <u-phone-call :phone="detailObj.phone" v-if="detailObj.phone">
		    {{ detailObj.phone }}
		  </u-phone-call>
		</template>
      </view>
   
      
    </view>
    <!-- <view v-if="isUser" class="flex-row">
      <p class="key">历史检查次数：</p>
      <p class="value">{{ detailObj.historyCheckCnt }}</p>
    </view>
    <view v-if="isUser" class="flex-row">
      <p class="key">隐患状况：</p>
      <p class="value">{{ detailObj.dangerDesc }}</p>
    </view> -->
    <view v-if="isCar" class="flex-row">
      <p class="key1">车辆类别：</p>
      <p class="value">{{ detailObj.objectType }}</p>
    </view>
    <view class="flex-row" v-if="!isDelivery && !isCar && !isBottle">
      <p class="key1">详细地址：</p>
      <p class="value">{{ detailObj.address }}</p>
    </view>
    <template v-if="!isDelivery && !isUser && !isBottle">
      <view
        class="flex-row"
        v-if="detailObj.masterName || detailObj.rectifierPerson"
      >
        <p class="key1">负责人：</p>
        <p class="value">
          {{ detailObj.masterName || detailObj.rectifierPerson }}
        </p>
      </view>
      <view class="flex-row" v-if="detailObj.phone">
        <p class="key1">联系电话：</p>
        <u-phone-call :phone="detailObj.phone">
          {{ detailObj.phone }}
        </u-phone-call>
      </view>
    </template>
    <view class="flex-row" v-if="isBottle">
      <p class="key1">气瓶状态：</p>
      <p class="value">{{ detailObj.bottleState }}</p>
    </view>
    <view
      class="flex-row"
      v-if="(isUser || isEnt || isStation) && detailObj.distance"
    >
      <p class="key1">距 离：</p>
      <!-- <p class="value">{{ detailObj.distance }}米</p> -->
      <p class="value">{{ detailObj.distanceStr }}</p>
    </view>
  </view>
</template>
<script setup lang="ts">
import { showImagePreview } from "vant";
import { computed, ref } from "vue";

const props = defineProps({
  detailObj: {
    type: Object,
    default: () => {},
  },
  type: {
    type: String,
    default: "",
  },
});
const isStation = computed(() => props.type == "STATION");
const isEnt = computed(() => props.type == "ENT");
const isDelivery = computed(() => props.type == "DELIVERY");
const isUser = computed(() => props.type == "USER");
const isCar = computed(() => props.type == "VEHICLE");
const isBottle = computed(() => props.type == "BOTTLE");
const fileViewList = (files: any[]) => {
  return files.map((file) => {
    return file.length;
  });
};
const preview = (images: string[], startPosition = 0) => {
  showImagePreview({
    images,
    startPosition,
  });
};
</script>

<style lang="scss" scoped>
.detail-box {
  padding: 20rpx 0;
  margin: 20rpx;
  background: #fff;
  border-radius: 10rpx;
  margin-bottom: 30rpx;
}
.person {
  padding-right: 5rpx;
  -webkit-box-flex: 1;
  -ms-flex: 1;
  -webkit-flex: 1;
  flex: 1;
}
.tag1 {
  white-space: nowrap;
  color: #0080ff;
  font-size: 24rpx;
  padding: 5rpx 10rpx;
  border-radius: 5px;
  background: rgba(0, 128, 255, 0.1);
  margin-left: 20rpx;
  margin-right: 20rpx;
  white-space: pre-wrap !important;
}
.flex-row {
  display: table;
  line-height: 50rpx;
  position: relative;
  gap: 10rpx;
  width:100%;
  .key1 {
    width: 160rpx !important;
	 display: table-cell;
    padding-left: 20rpx;
    color: #292929;
    font-size: 28rpx;
    　　text-align: justify;
    text-align-last: justify;
    .kong {
      display: inline-block;
      width: 100%;
    }
  }
  .key {
    width: 120rpx;
    padding-left: 40rpx;
    color: $uni-text-color;
    white-space: nowrap;
    text-align: left;
  }
  .value {
    // flex: 1;
	 display: table-cell;
    // width:calc(100%);
    color: #292929;
    white-space: wrap;
    word-break: break-all;
    font-size: 28rpx;
    display: flex;
    align-items: center;
    gap: 5px;
    &.img {
      display: flex;
      overflow-x: auto;
    }
    .van-image {
      margin-right: 20rpx;
      margin-bottom: 10rpx;
      flex-shrink: 0;
    }
  }
  &.org {
    .value {
      color: #0080ff;
    }
  }
}
.title {
  line-height: 40rpx;
  min-height: 50rpx;
  padding-left: 80rpx;
  margin: 20rpx 0;
  display: flex;
  align-items: center;
  font-family: PingFang SC;
  font-weight: bold;
  font-size: 32rpx;
  color: #333333;
}
::v-deep .phone{
	font-size: 32rpx !important;
	color: #0080ff !important;
}
.person{
	::v-deep .phone {
	  // position: absolute;
	  // right: 0px;
	  // top:0;
    display:inline
	}
}

$type: "STATION", "ENT", "DELIVERY", "USER", "VEHICLE", "BOTTLE";
@each $t in $type {
  .img-#{$t} {
    background: url("@/pages/myCheck/img/#{$t}.png") no-repeat 20rpx center;
    background-size: 50rpx;
  }
}
</style>
